<template>
	<div class="container">
		<div class="timeShow">当前时间：{{ showTime }}</div>
		<div class="timeLine">
			<TimeLine ref="Timeline" @timeChange="timeChange"></TimeLine>
		</div>
		<div class="btns">
			<button type="primary" @click="reRender">重新渲染</button>
			<button type="primary" @click="jump">跳转到2021-01-01零点</button>

			<radio-group @change="bindPickerChange">
				<label class="radio" v-for="(l,i) in zoomList" :key="i">
					<radio :value="i.toString()" :checked="zoom == i" />{{l.label}}
				</label>
			</radio-group>
		</div>
	</div>
</template>

<script>
	import dayjs from 'dayjs'

	import TimeLine from "@/components/timeLine/index"
	export default {
		components: {
			TimeLine
		},
		data() {
			return {
				// 基础用法
				time: Date.now(),
				zoom: 5,
				zoomList: ['半小时', '1小时', '2小时', '6小时', '12小时', '1天', '3天', '15天', '30天', '1年', '10年'].map((item, index) => {
					return {
						label: item,
						value: index
					}
				}),
				timer: null
			}
		},
		computed: {
			// 基础用法
			showTime() {
				return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
			}
		},
		onLoad() {
			// 基础用法
			this.timer = setInterval(() => {
				this.time += 1000
				this.$refs.Timeline.setTime(this.time)
			}, 1000)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		onBackPress() {
			clearInterval(this.timer)
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('携带值为', e.detail.value)
				this.zoom = e.detail.value
				this.zoomChange(this.zoom)
			},
			// 基础用法
			timeChange(t) {
				this.time = t
			},
			reRender() {
				this.initZoomIndex = 8
				this.$refs.Timeline.reRender()
			},
			jump() {
				this.$refs.Timeline.setTime('2021-01-01 00:00:00')
			},
			zoomChange(value) {
				this.$refs.Timeline.setZoom(value)
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		position: relative;
		justify-content: center;
		flex-direction: column;
		overflow: hidden;

		.timeLine {
			height: 50px;
		}
	}

	.btns {
		margin: 10px 0;
		display: flex;
		justify-content: center;
	}

	.timeShow {
		margin: 10px 0;
		display: flex;
		justify-content: center;
		user-select: none;
	}
</style>